import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; // 导入 Ant Design 图标
import { useState } from 'react';

import { desensitization } from '@/utils/string';

interface DesensitizationProps {
  value: string;
  start: number;
  end: number;
  howManyStars: number;
}
export default function Desensitization({
  value,
  start = 3,
  end = 3,
  howManyStars = 4,
}: DesensitizationProps) {
  const [showFull, setShowFull] = useState(false);

  const handlePhoneClick = () => {
    setShowFull(!showFull);
  };

  const displayPhone = () => {
    return desensitization(value, start, end, howManyStars);
  };

  return (
    <span onClick={handlePhoneClick} style={{ cursor: 'pointer', alignItems: 'center' }}>
      {displayPhone()}
      {value && (
        <span style={{ marginLeft: 5 }}>
          {showFull ? <EyeInvisibleOutlined /> : <EyeTwoTone />}
        </span>
      )}
    </span>
  );
}
